/* 柱图组件对象 */
var H5ComponentPolyline = function(name, cfg){
    var component = new H5ComponentBase(name, cfg);
    
    var w = cfg.width;
    var h = cfg.height;

    var cns = document.createElement('canvas');
    var ctx = cns.getContext('2d');
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;
    component.append(cns);


        var step = 10;
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#aaaaaa";

        //网格绘制
        window.ctx = ctx;

        for(var i = 0; i<step+1; i++){
            var y = (h/step)*i;
            ctx.moveTo(0,y);
            ctx.lineTo(w,y);
        }
        step = cfg.data.length+1;
        var text_w = w/step >> 0;
        for(var i = 0; i<step+1; i++){
            var x = w/step*i;
            ctx.moveTo(x,0);
            ctx.lineTo(x,h);
            if(cfg.data[i]){
                var text = $('<div class="text">');
                text.text(cfg.data[i][0]);
                text.css('width', text_w/2).css('left', x/2+text_w/4);
                component.append(text);
            }
        }
        ctx.stroke();

        //折线绘制
        var cns = document.createElement('canvas');
        var ctx = cns.getContext('2d');
        cns.width = ctx.width = w;
        cns.height = ctx.height = h;
        component.append(cns);

   var draw = function(per){
        ctx.clearRect(0,0,w,h);
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = "#ff8878";

        var x = 0;
        var y = 0;
        // ctx.moveTo(10,10);
        // ctx.arc(10,10,5,0,2*Math.PI);

        step = cfg.data.length+1;
        for(var i = 0; i< cfg.data.length;i++){
            var  item = cfg.data[i];
            x = (w/(cfg.data.length+1))*(i+1);
            y = h-(item[1]*h*per);
            ctx.moveTo(x,y);
            ctx.arc(x,y,5,0,2*Math.PI);
        }
        //连线
        ctx.moveTo((w/(cfg.data.length+1)), h-(cfg.data[0][1]*h*per));
        for(var i = 0; i< cfg.data.length;i++){
            var  item = cfg.data[i];
            x = (w/(cfg.data.length+1))*(i+1);
            y = h-(item[1]*h*per);
            ctx.lineTo(x,y);
        }

        //数据文本
        for(var i = 0; i< cfg.data.length;i++){
            var  item = cfg.data[i];
            x = (w/(cfg.data.length+1))*(i+1);
            y = h-(item[1]*h*per);
            ctx.fillStyle = item[2]?item[2]:'#fff';
            ctx.fillText(((item[1]*100)>>0)+'%', x-10, y-10);
        }

        ctx.stroke();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'rgba(255,  136, 120, 0.2)';

        //画阴影
        ctx.lineTo(x,h);
        ctx.lineTo((w/(cfg.data.length+1)),h);
        ctx.fillStyle = 'rgba(255,  136, 120, 0.2)';
        ctx.fill();

        ctx.stroke();
            
    }
    component.on('onLoad', function(){
        //折线动画
        var s = 0;
        for(var i = 0; i<100; i++){
            setTimeout(function(){
                s += .01;
                draw(s);
            },i*10+500);
        }
    });
    component.on('onLeave', function(){
        //折线动画
        var s = 1;
        for(var i = 0; i<100; i++){
            setTimeout(function(){
                s -= .01;
                draw(s);
            },i*10);
        }
    });

    return component;
}
